import React, { useEffect, useState } from 'react';
import { Divider, Popover, Steps, Table } from 'antd';
import ProTable, { ProColumns } from '@ant-design/pro-table';
import { MsgType, showMsg } from '@/utils/utils';
import { updateOrderStatus } from '@/services/shop/api';
import PopoverContent from '@/components/PopoverContent/Index';
import PermissionControl from  '@/components/PermissionControl';

const OrderInfo: React.FC<any> = (props) => {
  const { detail, optCallback } = props
  const [list, setList] = useState<any[]>([])
  const [steps, setSteps] = useState<any[]>([])
  const [visible, setVisible] = useState<boolean>(false);

  const columns: ProColumns<any>[] = [
    {
      title: '订单编号',
      width: 120,
      dataIndex: 'user_order_id'
    },
    {
      title: '支付单号',
      width: 120,
      dataIndex: 'order_id'
    },
    {
      title: '用户账号',
      dataIndex: 'user_name'
    },
    {
      title: '订单金额',
      align: 'right',
      valueType: 'money',
      dataIndex: 'order_price'
    },
    {
      title: '快递费',
      dataIndex: 'mail_price',
      valueType: 'money',
      align: 'right',
      width: 70,
      search: false
    },
    {
      title: '支付金额',
      align: 'right',
      valueType: 'money',
      dataIndex: 'pay_price',
      render: (val, record) => {
        return ['T', 'C'].includes(record.order_status) ? '￥0.00' : `￥${record.pay_price}`;
      }
    },
    {
      title: '支付方式',
      dataIndex: 'pay_method',
      renderText: () => {
        return '微信支付'
      }
    },
    {
      title: '配送方式',
      dataIndex: 'ship_method',
      valueType: 'select',
      valueEnum: {
        K: '快递',
        Z: '自提',
        Y: '院内配送'
      }
    },
    {
      title: '订单状态',
      dataIndex: 'order_status',
      valueType: 'select',
      valueEnum: {
        T: '待付款',
        P: detail.ship_method !== 'Z' ? '待发货' : '待自提',
        S: detail.ship_method !== 'Z' ? '已发货' : '待自提',
        F: '已完成',
        C: '已关闭',
        R: '已退款',
        G: '已退货',
      }
    },
    {
      title: '操作',
      align: 'center',
      valueType: 'option',
      hideInTable: detail.order_status !== 'T',
      render: (dom, entity) => {
        if (['T'].includes(entity.order_status)) {
          return <PermissionControl action_id="600604006">
            <Popover 
            visible={visible}
            onVisibleChange={setVisible}
            content={ <PopoverContent 
              confirmText="确认取消" 
              onCancel={() => {
                setVisible(false)
              }}
              onConfirm={ async (value: string) => {
              try {
                await updateOrderStatus({
                  order_id: entity.order_id,
                  order_status: 'C',
                  remarks: value
                })
                showMsg('订单已取消', MsgType.SUCCESS)
                optCallback?.()
                setVisible(false);
              } catch (error) {
                showMsg(error?.data?.errmsg);
              }
            }} /> }
            trigger="click">
              <a onClick={() => {
                setVisible(true);
              }}>取消订单</a>
            </Popover>
          </PermissionControl>
        }
        return null
      }
    }
  ];

  useEffect(() => {
    if (detail.order_id) {
      const item = {
        user_order_id: detail.user_order_id,
        order_id: detail.order_id,
        user_name: detail.user_name,
        order_price: detail.order_price,
        pay_price: detail.pay_price,
        pay_method: detail.pay_method,
        ship_method: detail.ship_method,
        order_status: detail.order_status,
        mail_price: detail.mail_price,
      }
      const { order_status, pay_status } = detail;

      let step: any[] = [];
      if (order_status === 'R' || pay_status === 'A' || pay_status === 'U') {
        step = [
          {
            title: '提交订单',
            description: `${detail.create_date} ${detail.create_time}`,
            status: 'finish'
          },
          {
            title: '支付订单',
            description: `${detail.pay_time || ''}`,
            status: 'finish'
          },
          {
            title: '申请售后',
            status: 'finish',
            description: detail.s_time || '',
          },
          {
            title: '已退款',
            status: (['R'].includes(order_status) || ['U'].includes(pay_status)) ? 'finish' : 'wait',
            description: detail.f_time || '',
          }
        ]
      } else {
        step = [
          {
            title: '提交订单',
            description: `${detail.create_date} ${detail.create_time}`,
            active: ['T', 'P', 'S', 'F'].includes(detail.order_status),
            status: ['T', 'P', 'S', 'F'].includes(detail.order_status) ? 'finish' : 'wait'
          },
          {
            title: '支付订单',
            description: `${detail.pay_time || ''}`,
            active: ['P', 'S', 'F'].includes(detail.order_status),
            status: ['P', 'S', 'F'].includes(detail.order_status) ? 'finish' : 'wait'
          },
          {
            title: '平台发货',
            active: ['S', 'F'].includes(detail.order_status),
            status: ['S', 'F'].includes(detail.order_status) ? 'finish' : 'wait',
            description: detail.s_time || '',
          },
          {
            title: '确认收货',
            active: ['F'].includes(detail.order_status),
            status: ['F'].includes(detail.order_status) ? 'finish' : 'wait',
            description: detail.f_time || '',
          },
          {
            title: '完成评价',
            active: detail.is_comment === 'Y',
            status: detail.is_comment === 'Y' ? 'finish' : 'wait'
          }
        ]
      }
      setSteps(step);
      setList([item]);
    }
  }, [detail])

  return <div className="service-record order-record">
      <Steps labelPlacement="vertical">
        {
          steps.map((item, index) => {
            return <Steps.Step key={index} status={item.status} title={item.title} description={item.description} />
          })
        }
      </Steps>

      <div className="header" style={{marginTop: 20}}>
        <div className="title">1. 订单基本信息</div>
      </div>

      <Divider style={{margin: '10px 0 2px !important'}} />

      <ProTable
        search={false}
        rowKey="order_id"
        bordered
        options={false}
        dataSource={list}
        columns={columns} 
        pagination={false}
        summary={pageData => {
          // 提问：这是干嘛的？
          let remarks = '';
          pageData.forEach(item => {
            remarks = item.remarks
          })
          return (
            <>
              <Table.Summary.Row>
                <Table.Summary.Cell className='orderinfo' index={1}>订单备注</Table.Summary.Cell>
                <Table.Summary.Cell colSpan={8} index={2}>{detail.remarks || '-'}</Table.Summary.Cell>
              </Table.Summary.Row>
            </>
          )
        }} 
      />
  </div>
}
export default OrderInfo;